<template>
  <div>
    <el-header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户信息</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main>
      <div class="user-profile">
        <div class="user-info">
          <img :src="user.avatar" alt="User Avatar" class="user-avatar" />
          <h1>{{ user.name }}</h1>
          <p>邮箱: {{ user.email }}</p>
          <p>电话: {{ user.phone }}</p>
        </div>
        <div class="user-orders">
          <h2>订单记录</h2>
          <div class="order" v-for="order in user.orders" :key="order.id">
            <p>订单号: {{ order.id }}</p>
            <p>餐厅: {{ order.restaurant }}</p>
            <p>日期: {{ order.date }}</p>
            <p>状态: {{ order.status }}</p>
          </div>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        id: 1,
        name: '张三',
        email: 'zhangsan@example.com',
        phone: '1234567890',
        avatar: '/images/avatar.png',
        orders: [
          {
            id: 1,
            restaurant: 'Restaurant 1',
            date: '2023-10-01',
            status: '已完成'
          },
          {
            id: 2,
            restaurant: 'Restaurant 2',
            date: '2023-10-05',
            status: '待配送'
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.user-profile {
  text-align: center;
}

.user-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 20px 0;
}

.user-info {
  margin-bottom: 20px;
}

.user-orders {
  margin-top: 20px;
}
/* 增加导航栏和下面内容的间距 */
.el-header {
  padding: 20px 0; /* 增加上下内边距 */
}
.order {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>